import React, { Component } from 'react';
import {
  Card,
  Form,
  Input,
  Radio,
  InputNumber,
  Select,
  Switch,
  DatePicker,
  TimePicker,
  Checkbox,
  Button,
  message
} from 'antd';

import moment from 'moment';
import 'moment/locale/zh-cn';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { Option, OptGroup } = Select;
const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 }
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 18 }
  }
};

const offsetLayout = {
  wrapperCol: {
    xs: 24,
    sm: {
      span: 18,
      offset: 6
    }
  }
};

class Regist extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  registUser = () => {
    let regInfo = this.props.form.getFieldsValue();
    message.success(`恭喜你${regInfo.userName}， 注册成功!`);
  };

  resetInfo = () => {
    console.log(1);
    this.props.form.resetFields();
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Card title="注册表单">
        <Form style={{ width: 600 }}>
          <FormItem label="用户名" {...formItemLayout}>
            {getFieldDecorator('userName', {
              initialValue: 'test',
              rules: [{ required: true, message: '用户名不能为空' }]
            })(<Input placeholder="username" />)}
          </FormItem>
          <FormItem label="密码" {...formItemLayout}>
            {getFieldDecorator('pw', {
              rules: [{ required: true, message: '密码不能为空' }]
            })(<Input placeholder="password" type="password" />)}
          </FormItem>
          <FormItem label="性别" {...formItemLayout}>
            {getFieldDecorator('sex', {
              initialValue: 1
            })(
              <RadioGroup>
                <Radio value={1}>男</Radio>
                <Radio value={0}>女</Radio>
              </RadioGroup>
            )}
          </FormItem>
          <FormItem label="年龄" {...formItemLayout}>
            {getFieldDecorator('age', {
              initialValue: 18
            })(<InputNumber min={0} max={100} onChange={this.age} />)}
          </FormItem>
          <FormItem label="当前状态" {...formItemLayout}>
            {getFieldDecorator('status', {
              initialValue: '1'
            })(
              <Select showSearch>
                <Option value="Disabled" disabled>
                  Disabled
                </Option>
                <OptGroup label="咸鱼">
                  <Option value="0">咸鱼一条</Option>
                  <Option value="1">有梦的一条咸鱼</Option>
                </OptGroup>
                <OptGroup label="MVVM">
                  <Option value="3">react</Option>
                  <Option value="4">vue</Option>
                </OptGroup>
              </Select>
            )}
          </FormItem>
          <FormItem label="爱好" {...formItemLayout}>
            {getFieldDecorator('hobby', { initialValue: ['0', '3'] })(
              <Select mode="multiple">
                <Option value="0">跑步</Option>
                <Option value="1">游泳</Option>
                <Option value="2">篮球</Option>
                <Option value="3">骑行</Option>
                <Option value="4">羽毛球</Option>
                <Option value="5">踢足球</Option>
                <Option value="6">吃货</Option>
              </Select>
            )}
          </FormItem>
          <FormItem label="是否已婚" {...formItemLayout}>
            {getFieldDecorator('married', {
              initialValue: true,
              valuePropName: 'checked'
            })(<Switch checkedChildren="是" unCheckedChildren="否" />)}
          </FormItem>
          <FormItem label="生日" {...formItemLayout}>
            {getFieldDecorator('barithday', {
              initialValue: moment('2015-01-01', 'YYYY-MM-DD')
            })(<DatePicker />)}
          </FormItem>
          <FormItem label="早起时间" {...formItemLayout}>
            {getFieldDecorator('weekup', {
              initialValue: moment('09:00:00', 'HH:mm:ss')
            })(<TimePicker />)}
          </FormItem>
          <FormItem label="联系地址" {...formItemLayout}>
            {getFieldDecorator('address', { initialValue: '东海风车镇' })(
              <TextArea rows={4} />
            )}
          </FormItem>
          <FormItem {...offsetLayout}>
            {getFieldDecorator('agreement', {
              initialValue: true,
              valuePropName: 'checked'
            })(<Checkbox>已阅读相关协议</Checkbox>)}
          </FormItem>
          <FormItem {...offsetLayout}>
            <Button type="primary" onClick={this.registUser}>
              Submit
            </Button>
            <Button type="primary" onClick={this.resetInfo}>
              resetInfo
            </Button>
          </FormItem>
        </Form>
      </Card>
    );
  }
}

export default Form.create()(Regist);
